<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>京苏易购电子商务</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="../../adminlte/plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="../../adminlte/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="../../adminlte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="../../adminlte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../adminlte/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="../adminlte/css/SourceSans.css">
</head>


<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="../index3.html" class="brand-link">
            <img src="../../adminlte/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">帷易胜(JD)商品管理</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">


            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->

                    <li class="nav-item active">
                        <a href="../brand" class="nav-link ">
                            <!--<i class="nav-icon fas fa-th"></i>-->
                            <p>
                                京东授权品牌
                            </p>
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="../category" class="nav-link">
                            <!--<i class="nav-icon fas fa-th"></i>-->
                            <p>
                                京东授权类目
                            </p>
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="../catebrand" class="nav-link">
                            <!--<i class="nav-icon fas fa-th"></i>-->
                            <p>
                                产线授权品牌
                            </p>
                        </a>
                    </li>


                    <li class="nav-item">
                        <a href="../task" class="nav-link">
                            <!--<i class="nav-icon fas fa-th"></i>-->
                            <p>
                                采集任务
                            </p>
                        </a>
                    </li>


                    <li class="nav-item" >
                        <a href="../item" class="nav-link" >
                            <!--<i class="nav-icon fas fa-th"></i>-->
                            <p>
                                SKU商品
                            </p>
                        </a>
                    </li>

                    <li class="nav-item active">
                        <a href="../productapply" class="nav-link">
                            <!--<i class="nav-icon fas fa-th"></i>-->
                            <p>
                                申请商品列表
                            </p>
                        </a>
                    </li>

                    <li class="nav-item active">
                        <a href="../productcreate" class="nav-link active">
                            <!--<i class="nav-icon fas fa-th"></i>-->
                            <p>
                                商品上架任务
                            </p>
                        </a>
                    </li>

                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-left">
                            <li class="breadcrumb-item"><a href="../#">主页</a></li>
                            <li class="breadcrumb-item"><a href="../productcreate">上架商品列表</a></li>
                            <li class="breadcrumb-item active">上架任务: <span th:text="*{task.title}">Sebastian</span></li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">

                                <button type="button" class="btn btn-primary" style="margin-right: 20px;" data-toggle="modal" data-target="#modal-import">
                                    导入SKU
                                </button>

                                <button type="button" class="btn btn-primary shelvesBtn" style="margin-right: 20px;">
                                    上 架
                                </button>

                                <!--<button type="button" class="btn btn-primary" style="margin-right: 20px;" data-toggle="modal" data-target="#modal-default">-->
                                    <!--编 辑-->
                                <!--</button>-->

                                <!--<button type="button" class="btn btn-primary" style="margin-right: 20px;">-->
                                    <!--删 除-->
                                <!--</button>-->

                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">


                                <form class="form-horizontal">
                                    <div class="card-body">
                                        <div class="row">

                                            <input type="hidden" name="taskid" class="form-control"  th:value="${task.id}" >

                                            <div class="col-2">
                                                <input type="text" name="wareId" class="form-control" placeholder="商品编码">
                                            </div>

                                            <div class="col-2">
                                                <input type="text" name="name" class="form-control" placeholder="商品名称">
                                            </div>

                                            <div class="col-2">
                                                 <input type="text" name="cidName1" class="form-control" placeholder="类目">
                                            </div>

                                            <div class="col-2">
                                                <input type="text" name="brandName" class="form-control" placeholder="品牌">
                                            </div>

                                            <div class="col-2">
                                                <a href="#"  class="btn btn-primary queryBtn">搜 索</a>
                                            </div>


                                        </div>
                                    </div>
                                </form>



                                <table id="taskProductTable" class="table table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th><input type="checkbox" id="checkall"/></th>
                                        <th>序号</th>
                                        <!--<th>任务ID</th>-->
                                        <!--<th>商品编码</th>-->
                                        <th>商品名称</th>
                                        <th>供应商编码</th>
                                        <th>原始品牌</th>
                                        <th>原始类目</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>


    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>


    <div class="modal fade" id="modal-import">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">导入SKU</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form role="form" id="skuImportForm">
                        <input type="hidden" name="taskid" class="form-control"  th:value="${task.id}" >
                        <div class="card-body">
                            <div class="form-group">
                                <label>选择采集任务</label>

                                <select class="form-control select2"  name="fromid" style="width: 100%;">
                                    <option value=""> -- 选择采集任务 -- </option>
                                    <option th:each="task,stat:${tasks}" th:value="${task.id}" th:text="${task.title}"></option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>Textarea</label>
                            <textarea id="logs" class="form-control" rows="3" placeholder="logs" style="margin-top: 0px; margin-bottom: 0px; height: 474px;"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" id="skuImportCancel" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button type="button" id="skuImport" class="btn btn-primary">保 存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="../adminlte/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="../adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="../adminlte/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="../adminlte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="../adminlte/plugins/select2/js/select2.full.min.js"></script>

<script src="../adminlte/plugins/moment/moment.min.js"></script>

<!-- page script -->
<script>

    $(document).ready(function (){

        $('.select2').select2();

        var table = $("#taskProductTable").DataTable({
            language: {
                url: '../i18n/Chinese.json'
            },

            "paging": true,
            "lengthChange": true,
            "searching": false,
            "ordering": false,
            "info": true,
            "autoWidth": false,
            "responsive": true,

            serverSide: true,
            "ajax": {
                "url": "../taskproduct/query",
                "data": function ( d ) {
                    var values = $("form.form-horizontal").serializeArray();

                    var data = {};
                    $.each(values, function (index, item) {
                        data[item.name] = item.value;
                    });

                    return $.extend( {}, d, data);
                }
            },

            columns: [
                {
                    "sClass": "center",
                    "bSortable": false,
                    "width": "20px",
                    "mRender": function (data, type, row, meta) {
                        var btnBind = "<input type='checkbox'  class='checkchild'  name='checkBox1' value='" + row['id'] + "'/>";
                        return btnBind;
                    }
                },
                {
                    data : null,
                    bSortable : false,
                    width : "50px",
                    "orderable": false,
                    render : function(data, type, row, meta) {
                        // 顯示行號
                        var startIndex = meta.settings._iDisplayStart;
                        return startIndex + meta.row + 1;
                    }
                },

                // {"data": "id", "width": "10px"},
               //  {"data": "wareId", "width": "100px"},
                {"data": "name", "width": "120px",
                    render: function(data, type, row, meta) {
                        var html = [];
                        html.push('<a href="../productdetail/'+ row.id +'">'+ data +'</a>');
                        return html.join('');
                    }
                },
                {"data": "originalCode", "width": "100px"},
                {"data": "originalBrand", "width": "80px"},
                {"data": "originalCategoryDesc", "width": "140px"}
            ]
        });

        $('#taskProductTable tbody').on( 'click', 'tr', function () {


            var checkBox = $(this).find("input[name='checkBox1']");

            if( checkBox.is(':checked') ) {
                checkBox.attr("checked",false);
            } else {
                checkBox.attr("checked",true);
            }
        } );

        /**
         * 全选
         */
        $("#checkall").click(function () {

            debugger;

            //获取checkall的选中状态,是true 或者false

            var check = $(this).prop("checked");

            //将选中状态赋值给其他的checkbox

            $(".checkchild").attr("checked", check);
        });

        $("a.queryBtn").click(function(){
            table.ajax.reload();
        });

        $("#skuImport").click(function(){
            var values = $("#skuImportForm").serializeArray();

            var params = {};
            $.each(values, function (index, item) {
                params[item.name] = item.value;
            });

            $("#logs").val("");

            $.ajax({
                type: 'POST',
                url: "../taskproduct/skuimport",
                data: params,
                success: function (result) {
                    debugger;

                    if ( !!result && result.success ) {
                        $("#skuImportCancel").click();
                    }

                    if ( !!result && !!result.msg ) {
                        alert(result.msg);
                    }

                    table.ajax.reload();
                },
                dataType: "json"
            });
        });

        $("button.shelvesBtn").click(function(){

            var ids = [];
            $(".checkchild:checked").each(
                function() {
                    ids.push($(this).val());
                }
            )

            if ( ids === undefined || ids.length==0 ) {
                alert("请选择需要上架的商品");
                return;
            }

            var r=confirm("确认开始上架");
            if (r==true)
            {
                var params = {ids: ids};

                $.ajax({
                    type: 'POST',
                    url: "../taskproduct/shelves",
                    data: params,
                    success: function (result) {

                        if ( !!result && result.success ) {
                            $("#skuImportCancel").click();
                        }

                        if ( !!result && !!result.msg ) {
                            alert(result.msg);
                        }

                        table.ajax.reload();
                    },
                    dataType: "json"
                });

            }
            else
            {
                alert("Cancel");

            }


        });



        var url = window.location.href;

        var index = url.lastIndexOf("\/");
        var domain = url.substring(0,index);

        var source = new EventSource(domain + '/subscribe?id=yihuihui');
        source.onmessage = function (event) {
           console.log(event.data);

           var text = $("#logs").val();

           $("#logs").val(text + "\n" + JSON.stringify(event.data));
        };
        <!-- 添加一个开启回调 -->
        source.onopen = function (event) {
            console.log(event);
        };

    });
</script>
</body>
</html>
